<%@page import="karaoke.negocio.GestionTipoProducto"%>
<%@page import="karaoke.modelo.JsonResult"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@page import="java.util.ArrayList,java.util.Collection,karaoke.modelo.Administrador,karaoke.modelo.Local,karaoke.modelo.Producto,karaoke.modelo.TipoProducto"%>
<%@page import="karaoke.negocio.GestionLocales,karaoke.negocio.GestionProductos"%>
<%@page import="karaoke.util.DateFormat"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Karaoke.pe</title>
	
	<%@include file="scripts.jsp" %>
	
	<script type="text/javascript" language="javascript" src="../js/jquery.dataTables.js"></script>
	<script type="text/javascript" language="javascript" src="../js/scriptscustomize.js"></script>
	<script type="text/javascript" language="javascript" src="../js/datatable/DT_bootstrap.js"></script>
	<script type="text/javascript" language="javascript" src="../js/validation.js"></script>
	<script type="text/javascript" charset="utf-8">
		$(document).ready(function() {
			/* Add a click handler to the rows - this could be used as a callback */
			$("#tblproductos tbody tr").click( function( e ) {
				if ( $(this).hasClass('row_selected') ) {
					$(this).removeClass('row_selected');
					$("#btneditar").attr("disabled", true);
				}
				else {
					$('#tblproductos tbody tr.row_selected').removeClass('row_selected');
					$(this).addClass('row_selected');
					if($("#btneditar").attr("disabled")){
						$("#btneditar").attr("disabled", false);
					}
				}
			});
			
			$('#tblproductos').dataTable( {
				"sDom": "<'row'<'span4'l><'span6'f>r>t<'row'<'span4'i><'span6'p>>",
				"oLanguage": {
					"sLengthMenu": "_MENU_ registros por pagina"
				}
			} );
		} );
	</script>
	
	<link href="../css/customize.css" rel="stylesheet">
	<link href="../css/datatable/DT_bootstrap.css" rel="stylesheet">
</head>
<body class="preview" id="top">
	
	<%
	//out.println(DateFormat.getFechaHoraSave("13/06/2013", "12:00 a.m."));
	
	/*validamos existencia de sesion*/
	String nombreadm = "";
	HttpSession sesion = request.getSession();
	Administrador adm = (Administrador)sesion.getAttribute("ADMINISTRADOR");
	boolean logeado = false;
	int idadmin = 0;
	
	if (adm == null) {
		response.sendRedirect("index.jsp");
	} else {
		if (sesion.getAttribute("login") == null){
			sesion.setAttribute("login", "true");
		} else {
			logeado = Boolean.parseBoolean(sesion.getAttribute("login").toString());
		}
		nombreadm = adm.getNombres()+" "+adm.getPaterno()+" "+adm.getMaterno();
		idadmin = adm.getIdadministrador();
	}
	
	String indicador = request.getParameter("logout");
	if (indicador != null){
		sesion.removeAttribute("ADMINISTRADOR");
		response.sendRedirect("index.jsp");
	}
	
	Local local = (Local)sesion.getAttribute("LOCAL");
	String nomlocal = "";
	int idlocal = 0;
	
	if(local!=null){
		nomlocal = local.getNombre();
		idlocal = local.getIdlocal();
	}
	GestionLocales negocioL = new GestionLocales();
	Collection<Local> locales = negocioL.listar();
	
	GestionProductos negocioR = new GestionProductos();
	String busque = request.getParameter("txtsearch");
	//Collection<Producto> productos = negocioR.listarByLocal(idlocal);
	Collection<Producto> productos = negocioR.buscarPorNombreYCodigo((busque==null?"":busque) , idlocal);
	
	GestionTipoProducto negocioTP = new GestionTipoProducto();
	Collection<TipoProducto> tipoproductos = negocioTP.listar();
	%>
	<jsp:include page="header_adm_local.jsp"></jsp:include>
	
    <div class="container">
		
		
		<!-- MESSAGE -->
		<% if(!logeado){ %>
		<div class="row">
		    <div class="span12">
		      <div class="alert alert-info" id="msgalert">
		        <a class="close">×</a>
		        <strong>Welcome!!</strong>&nbsp;<%=nombreadm%> 
		      </div>
		    </div>
		  </div>
		<% } %>
		
		<div class="page-header">
			<h3>Productos</h3>
		</div>
		<div class="row">
			<div class="span10 offset1">
				<form id="frmbusquedap" class="form-horizontal well" action="productos.jsp" method="post">
					<fieldset>
						<div class="control-group hidden">
				            <label class="control-label" for="selectlocal">Local&nbsp;:</label>
				            <div class="controls">
				              <select name="sellocal" id="selectlocal" readonly>
				                <!-- <option value="">..: Todos :..</option> -->
				                <%
					                if(locales != null){
					                	for(Local l: locales){
					                		out.println("<option value='"+l.getIdlocal()+"' "+(idlocal==l.getIdlocal()?"selected":"")+">"+l.getNombre()+"</option>");
					                	}
					                }
				                %>
				              </select>
				            </div>
				          </div>
				          <div class="control-group">
				          	<label class="control-label" for="txsearch">Código o Nombre&nbsp;:</label>
				          	<div class="controls">
				          		<input name="txtsearch" id="txsearch" type="search" class="search-query span5">
				          		<button type="submit" class="btn btn-primary"><i class="icon-search icon-white"></i>&nbsp;Buscar</button>
				          	</div>
				          </div>
			          </fieldset>
				</form>
			</div>
		</div>
		
		<div class="row">
			<div class="span10 offset1">
				<div class="btn-group">
				  <button id="btnnuevo" class="btn btn-primary" data-toggle="modal" href="#NuevaProductoModal">Nuevo</button>
				  <button id="btneditar" class="btn btn-primary" data-toggle="modal" href="#NuevaProductoModal" disabled>Editar</button>
				  <button id="btneliminar" class="btn btn-primary" disabled>Eliminar</button>
				  <button class="btn" disabled>Producto</button>
				</div>
			</div>
			<div class="spacer"></div>
		</div>
		
		<div class="row">
			<div class="span10 offset1">
				<table id="tblproductos" cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered dataTable">
					<thead>
						<tr>
							<th>Id.</th>
							<th>Nombre Producto</th>
							<th>Tipo Producto</th>
							<th>Precio</th>
							<th>Disponible</th>
						</tr>
					</thead>
					<tbody>
				 	
					<%
					//Collection<Reserva> reservas = (Collection<Reserva>)request.getAttribute("RESERVAS");
					if (productos != null) {
						for (Producto p: productos)
						{
							out.println("<tr class='gradeX'>");
							out.println("<td>"+p.getIdproducto()+"</td>");
							out.println("<td>"+p.getNombre()+"</td>");
							out.println("<td>"+p.getIdtipoproducto().getNombre()+"</td>");
							out.println("<td>"+p.getPrecio()+"</td>");
							if (p.isDisponible()){
								out.println("<td align=\"center\"> <input type='checkbox' disabled checked value=true></td>");
							}else{
								out.println("<td align=\"center\"> <input type='checkbox' disabled value=false></td>");
							}
							out.println("</tr>");
						}
					}
					%>
					</tbody>
				
				</table>
			</div>
			<div class="spacer"></div>
		</div>
		
		<!-- MODALS -->
		<div class="row">
			<div class="span10">
			<form class="form-horizontal" id="idfrmproducto" name="frmproducto" action="operacionProductoServlet" onsubmit="operarP(); return false;">
				<div id="NuevaProductoModal" class="modal hide fade">
					 <div class="modal-header">
					   <button type="button" class="close" data-dismiss="modal">×</button>
					   <h3>Registrar Producto</h3>
					 </div>
					 
					 <div class="modal-body">
					 		<div id="idoperamsg" class="alert">
						        <a class="close">×</a>
						        <div class="progress progress-info progress-striped active MB0">
								  <div class="bar" style="width: 100%"></div>
								</div>
						        <div id="msjresultados"></div>
						    </div>
						    
							<fieldset>
							<input type="hidden" name="hdlocal" value="<%=idlocal%>">
							<div class="control-group hidden">
							  <label class="control-label" for="txidproducto">Id&nbsp;:</label>
							  <div class="controls">
							  	<input id="txidproducto" name="txtidproducto" value="" class="input-small" readonly>
							  </div>
							</div>
							
							<div class="control-group">
							  <label class="control-label" for="txnombre">Nombre&nbsp;:</label>
							  <div class="controls">
							  	<input type="text" id="txnombre" name="txtnombre" value="" class="input-xlarge" required>
							  </div>
							</div>
							
							<div class="control-group">
							  <label class="control-label" for="winselecttipo">Tipo Producto&nbsp;:</label>
							  <div class="controls">
							  	<select name="winseltipo" id="winselecttipo" class="span3" required>
							  		<option value="">..: Seleccione Tipo Producto :..</option>
								    <%
								    if(tipoproductos != null){
					                	for(TipoProducto tp: tipoproductos){
					                		out.println("<option value='"+tp.getIdtipoproducto()+"'>"+tp.getNombre()+"</option>");
					                	}
					                }
								    %>
							    </select>
							  </div>
							</div>
							
							<div class="control-group">
							  <label class="control-label" for="txprecio">Precio&nbsp;:</label>
							  <div class="controls">
							    <input id="txprecio" name="txtprecio" type="text" class="input-small" placeholder="00.00" required onkeypress="return isDoublePrecio(event, this);">
							  </div>
							</div>
							
							<div class="control-group">
							  <label class="control-label" for="chdisponible">Disponible&nbsp;:</label>
							  <div class="controls">
							  	<label class="checkbox">
							    	<input id="chdisponible" name="chkdisponible" type="checkbox" checked> Maneja Stock
							    </label>
							  </div>
							</div>
							
							</fieldset>
					 </div>
					 <div class="modal-footer">
					   <button type="submit" id="idgrabar" class="btn btn-primary">Grabar</button> 
					   <button class="btn" data-dismiss="modal">Cerrar</button>
					 </div>
				 
				</div>
			</form>
			</div>
		</div>
		
		<script type="text/javascript">
			var operamsg = $("#idoperamsg");
			var load = $(".progress");
			operamsg.hide();
			load.hide();
			
			function operarP(){
				var form = $("#idfrmproducto");
				var divmsg = operamsg.find("div#msjresultados");
				var button = $("#idgrabar");
				//cargador
				operamsg.removeClass().addClass("alert").fadeIn("fast");
				load.show();
				button.attr("disabled", true);
				
				var request = $.ajax({
				  url: form.attr("action"),
				  type: "POST",
				  data: form.serialize(),
				  dataType: "json"
				});
				
				request.done(function(msg) {
					load.hide();
					divmsg.html( msg.mensaje );
					operamsg.addClass(msg.claseMsg).delay(2800).fadeOut("slow", function(){
						button.attr("disabled", false);
						if (msg.tipoMsg == "success") {
							$("#frmbusquedap").submit();
						}
					});
					console.log(msg);
				});
				
				request.fail(function(jqXHR, textStatus) {
					divmsg.html("Request failed: " + textStatus );
				});
				
				return false;
			}
			
			function cargaSala(idlocal, idsala){
				$.ajax({
					url: "/KaraokeMasters/ConsultaSalaLocalServlet",
					type: "POST",
					data: { idlocal: idlocal, idsala: idsala },
					dataType: "html"
				}).done(function(html){
					$("#winselectsala").html(html);
					//console.log(html);
				}).fail(function(jqXHR, textStatus) {
				  alert( "Request failed: " + textStatus );
				});
			}
			
			function limpiar(){
				$("#winselecttipo").val("");
				$("#txnombre").val("");
				$("#txprecio").val("");
				$("#chdisponible").prop("checked", true);
				$("#idoperamsg").hide();
				$("#idgrabar").attr("disabled", false);
				$("#txidproducto").val("");
				$("#txidproducto").attr("disabled", true);
				$("#txidproducto").parent().parent().addClass("hidden");
			}
			
			$("#idoperamsg").find("a.close").click(function(){ $(this).fadeOut("fast"); });
			
			$("#btnnuevo").click(function(){
				$("#NuevaProductoModal").children(".modal-header").find("h3").html("Registrar Producto");
				limpiar();
			});
			
			$("#btneditar").click(function(){
				$("#NuevaProductoModal").children(".modal-header").find("h3").html("Editar Producto");
				var idproducto = $("#tblproductos").find("tr.row_selected").children().html();
				
				$.ajax({
					url: "/KaraokeMasters/ConsultaProductoServlet",
					type: "POST",
					data: { idproducto: idproducto },
					dataType: "json"
				}).done(function(json){
					console.log(json);
					moverReserva(json);
				}).fail(function(jqXHR, textStatus) {
				  alert( "Request failed: " + textStatus );
				});
			});
			
			function moverReserva(data){
				$("#winselecttipo").val(data.idtipoproducto.idtipoproducto);
				$("#txprecio").val(data.precio);
				$("#txnombre").val(data.nombre);
				$("#chdisponible").prop("checked", data.disponible);
				$("#idoperamsg").hide();
				$("#txidproducto").val(data.idproducto);
				$("#txidproducto").parent().parent().removeClass("hidden");
				$("#txidproducto").attr("disabled", false);
			}
		</script>
		
	  <%@include file="footer.jsp" %>

    </div> <!-- /container -->

    <%@include file="lejavascript.jsp" %>

</body>
</html>